/*
Theme Name: Memory
Theme URI: https://shawnzeng.com
Description: Theme Memory by Shawn
Version: 1.0
Author: Shawn
Author URI: https://shawnzeng.com
Tags: Memory, Shawn, Wordpress
*/


/*pc端*/

@font-face {
    font-family: rst;
    src: url(fonts/rst.ttf);
}

html, body, * {
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
    background: transparent;
    vertical-align: baseline;
    word-wrap: break-word;
    -webkit-text-size-adjust: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

html, body {
    min-height: 100%;
    width: 100%;
}

body {
    color: black;
    font: 13px/25px rst, Microsoft Yahei, Arial, Georgia, "Nimbus Roman No9 L", "Songti SC", sans-serif;
    background: #F0F0F5;
}

.other-font {
    font: 14px/25px Microsoft Yahei, Arial, Georgia, "Nimbus Roman No9 L", "Songti SC", sans-serif;
}

.night-mode .cover {
    position: fixed;
    top: 0px;
    left: 0px;
    outline: 5000px solid rgba(0, 0, 0, 0.4);
    z-index: 1000;
}

::-moz-selection {
    background: #0bf;
    color: #fff;
}

::selection {
    background: #0bf;
    color: #fff;
}

.art .text-right {
    text-align: right;
    padding-top: 5px;
}

.art .shuoshuo .text-right span {
    position: relative;
    right: 0;
    top: 0;
    font-size: 12px;
}

#evanyou {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

#header {
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
}

#menu {
    margin: 0 auto;
    height: 42px;
    max-width: 100%;
	position: relative;
}

form#searchform {
	width: 200px;
    height: 42px;
    max-width: 100%;
    background: #0bf;
    position: absolute;
    right: -200px;
    bottom: -42px;
}

#mobile-menu {
    display: none;
}

#menu ul {
    list-style: none;
    overflow: hidden;
}

#menu li {
    float: left;
}

#menu li:hover {
    background: rgba( 255, 255, 255, .18);
}

#menu li a {
    display: block;
    line-height: 42px;
    font-size: 14px;
    text-shadow: none;
    text-decoration: none;
    color: #fff;
    text-align: center;
    padding: 0 16px;
}

#menu #menu-bar {
    display: none;
}

#menu #menu-search {
    float: right;
    display: inline-block;
    margin-right: 10px;
    color: white;
    line-height: 42px;
    padding-top: 8px;
}

#menu-logo #logo {
    float: left;
    height: 100%;
    margin: 0 20px;
    display: inline;
}

#menu-logo #logo a {
    text-decoration: none;
    text-indent: 0;
    font-weight: bold;
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    color: #FFF;
    line-height: 42px;
    font-size: 28px;
}

#main {
    position: relative;
    width: 980px;
    margin: 50px auto 0;
    max-width: 100%;
    overflow: hidden;
}

#main-part {
    position: relative;
    width: 60%;
    float: left;
    padding-left: 35px;
}

.right {
    position: relative;
    width: 35%;
    float: right;
    padding-right: 35px;
}

.right>ul{
    list-style: none;
}

.right .art .art-widget-sidebar {
    list-style: none;
}

.right .art .art-widget-sidebar li {
    text-indent: 1em;
}

.right .art .art-widget-sidebar li a, .right .art .art-widget-sidebar li a:hover {
    text-decoration: none;
    color: #000;
}

#main-part .art .art-pic {
    overflow: hidden;
}

#main-part li .art .art-pic {
    height: 200px;
}

#main-part .art .art-pic img {
    width: 100%;
    min-height: 180px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

#main-part .posts-list li {
    list-style: none;
}

#main-part .art, .right .art, .comment-part {
    margin-bottom: 40px;
}

#main-part .posts-list li:last-child {
    margin-bottom: -20px;
}

.art, .comment-part {
    background: #FFF;
    /*padding: 10px 15px;*/
    position: relative;
    opacity: 0.85;
    border-radius: 6px;
    -webkit-box-shadow: 1px 1px 1px #bbb;
    box-shadow: 1px 1px 1px #bbb;
}

.art .round-category {
    position: absolute;
    top: 10px;
    left: 10px;
    height: 30px;
    color: #fff;
}

.art .round-category img {
    width: 25px;
    height: 30px;
    padding: 2.5px 0;
    float: left;
}

.art .round-category .round-category-n {
    font-size: 16px;
    float: left;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 6px;
    padding: 0 10px;
}

.art .art-main {
    padding: 15px 15px 10px;
}

.art .art-main .art-title a, .art .art-title a:hover {
    font-size: 25px;
    font-weight: 700;
    text-decoration: none;
    color: #000;
}

.comment-part {
    padding: 10px 15px;
}

.comment-part .comment-title {
    font-size: 20px;
    font-weight: 700;
    color: #000;
}

.comment-part #comment-content {
    height: 100px;
    width: 100%;
    margin: 10px 0;
}

.comment-part .comment-form {
    text-align: center;
}

.comment-part .text-input {
    padding: 10px;
    background: #f4f6f7;
    outline: none;
    border: 1px solid #d9d9d9;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 14px;
    border-radius: 3px;
    font-family: inherit;
}

.comment-part input.text-input {
    height: 25px;
    width: 30.5%;
}

.comment-part #comment-author {
    float: left;
}

.comment-part #comment-url {
    float: right;
}

.comment-part .form-submit {
    margin-top: 10px;
}

.comment-part .comment-submit {
    background: #0bf;
    padding: 10px;
    color: #fff;
    width: 100%;
    font-family: inherit;
    border-radius: 5px;
    cursor: pointer;
}

.comment-part #comments-area {
    padding-top: 10px;
    margin-top: 10px;
    border-top: 3px solid #ea9595;
}

.comment-part .art-comments {
    list-style: none;
    overflow: hidden;
}

.comment-part .art-comments .art-comment {
    padding-bottom: 10px;
    margin: 10px 0;
    border-bottom: 2px dashed #ea9595;
}

.comment-part .art-comments .art-comment .commentator-avatar {
    width: 50px;
    height: 50px;
    float: left;
}

.comment-part .art-comments .art-comment .commentator-avatar img {
    position: relative;
    display: block;
    overflow: hidden;
    height: auto;
    max-width: 100%;
    border-radius: 10px;
}

.comment-part .art-comments .art-comment .commentator-comment {
    overflow: hidden;
}

.commentator-comment .comment-chat {
    position: relative;
    margin-left: 15px;
    color: #555;
    background: #fff;
    padding: 6px 10px;
    word-wrap: break-word;
    border: 1px solid;
    border-color: #ddd #ddd #eee #ddd;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #bbb;
    box-shadow: 0 1px 1px #bbb;
}

.commentator-comment .comment-chat .comment-arrow {
    background: url(img/talk.png) no-repeat;
    width: 7px;
    height: 13px;
    position: absolute;
    top: 10px;
    left: -7px;
}

.commentator-comment .comment-chat .commentator-name {
    color: #000;
}

.commentator-comment .comment-chat .commentator-level {
    font-size: 12px;
}

.commentator-comment .comment-chat .comment-time-p {
    text-align: right;
    font-size: 12px;
}

.commentator-comment .comment-chat .comment-comment {
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.art .art-main .art-info {
    margin: 1em 0;
}

.art .art-main .art-info span {
    display: inline-block;
}

.art .art-main .art-info-readmore {
    text-align: right;
}

.art .art-main .art-info-readmore a, .art .shuoshuo .text-right a {
    border-radius: 6px;
    -webkit-box-shadow: 1px 1px 1px #bbb;
    box-shadow: 1px 1px 1px #bbb;
    text-decoration: none;
    color: #fff;
    background: rgba(0, 187, 255, 0.8);
    display: inline-block;
    padding: 1px 6px;
}

.art .art-main .art-intro {
    margin: 0;
}

.art .art-content a {
    text-decoration: none;
    color: #fff;
    padding: 3px;
    background: #0bf;
    border-radius: 5px;
    margin: 3px;
}

.art .art-content a:before {
    font-family: FontAwesome;
    content: "\f0c1\ ";
}

.art .art-content p {
    text-indent: 2em;
}

.art .art-content li {
    list-style: none;
}

.art .art-content li::before {
    font-family: FontAwesome;
    content: "\f0eb";
    /*color: #0bf;*/
}

.art .art-content img {
    display: block;
    margin: 1em auto;
    max-width: 100%;
    border-radius: 6px;
}

.art .shuoshuo {
    padding: 25px 5px 10px 0px;
    margin-left: 80px;
    margin-right: 10px;
    position: relative;
}

.art .shuoshuo img {
    float: left;
    margin-left: -70px;
    margin-top: -10px;
    width: 50px;
    height: 50px;
}

.art .shuoshuo span {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 12px;
}

.art .left-pic {
    float: left;
    padding: 5px;
    width: 40%;
}

.art .right-info {
    width: 60%;
    float: right;
    display: block;
    padding: 8px 5px 5px 0;
    text-align: left;
    line-height: 20px;
}

.art .right-info ul {
    list-style: none;
}

.art .right-info ul li {
    border-bottom: 1px dotted rgba(0, 0, 0, .5);
}

.art .right-info ul li span {
    color: rgba(0, 0, 0, .5);
    font-weight: bold;
}

.art .left-pic img {
    width: 100px;
    max-width: 100%;
    border-radius: 50%;
    border: 1px solid #ddd;
    padding: 2px;
    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
}

.art .catch-me {
    clear: both;
    border-top: 3px solid #FAFAFA;
    padding-top: 7px;
}

.art .catch-me, .art .catch-me a {
    text-align: center
}

.art .catch-me a {
    display: inline-block;
    margin-bottom: 7px;
    text-decoration: none;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.art .catch-me div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.art .catch-me i {
    display: inline-block;
    font-size: 16px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    color: rgba(0, 0, 0, .5);
    background-color: rgba(0, 0, 0, .1);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    font-style: normal
}

.art .catch-me i:hover {
    background-color: #0bf;
    color: #fff
}

.art .art-widget-header {
    line-height: 38px;
    margin: 0;
    background: #FAFAFA;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.art .art-widget-header h3 {
    font-weight: normal;
    font-size: 18px;
    line-height: 38px;
    padding: 0 15px;
}

#page-nav {
    text-align: center;
}

#page-nav .page-number {
    width: 25px;
    height: 25px;
    background: #fff;
    text-decoration: none;
    border-radius: 6px;
    display: inline-block;
    color: #000;
    line-height: 25px;
    font-size: 16px;
    margin: 0 3px 30px;
    opacity: 0.85;
    -webkit-box-shadow: 1px 1px 1px #bbb;
    box-shadow: 1px 1px 1px #bbb;
}

#page-nav .current {
    background: silver;
    color: #fff;
}

#foot {
    text-align: center;
    clear: both;
    position: relative;
}

#foot a, #foot a:hover {
    text-decoration: none;
    color: #000;
}

#foot .throb {
    -webkit-animation: xintiao 1.33s ease-in-out infinite;
    animation: xintiao 1.33s ease-in-out infinite;
}

#foot .my-face {
    -webkit-animation: my-face 5s infinite ease-in-out;
    animation: my-face 5s infinite ease-in-out;
    display: inline-block;
    margin: 0 5px
}

.go-top {
    display: block;
    z-index: 999;
    background: #E6E6EB;
    width: 60px;
    height: 50px;
    line-height: 50px;
    opacity: .8;
    color: rgba(0, 0, 0, .6);
    position: fixed;
    right: 0;
    bottom: 110px;
    padding-right: 10px;
}

.go-top .fa-rocket {
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
    margin-top: 15px;
    margin-left: 8px;
}

.toolbar {
    position: fixed;
    right: -100px;
    bottom: 60px;
    height: 50px;
    background: #E6E6EB;
    padding-right: 10px;
}

.toolbar a {
    display: inline-block;
    width: 50px;
    z-index: 999;
    float: left;
    text-align: center;
    text-decoration: none;
    height: 50px;
    line-height: 50px;
    opacity: .8;
    color: rgba(0, 0, 0, .6);
}

.toolbar .toolbar-rel {
    position: relative;
}

.toolbar .toolbar-rel .modetoolbar{
    position: absolute;
}

.toolbar .fa {
    margin-top: 10px;
}

.toolbar .fa-moon-o, .toolbar .fa-font {
    margin-left: 5px;
}




/*手机端*/

@media screen and (max-width: 780px) {
    #header {
        background: rgb(96, 96, 96);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1
    }
    #menu {
        text-align: center;
    }
    #menu #menu-main {
        display: none;
    }
    #menu #menu-logo #logo {
        float: none;
    }
    #menu ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    #menu li {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        text-align: center;
    }
    #menu li a {
        padding: 0;
    }
    #menu #menu-bar {
        float: left;
        display: inline-block;
        margin-left: 10px;
        color: white;
        line-height: 42px;
        padding-top: 8px;
    }
    body {
        background: #efefef;
        overflow-x: hidden;
    }
    #main {
        margin: 0 auto;
    }
    #main-part {
        width: 100%;
        padding-left: 0px;
        padding-top: 42px;
    }
    .right {
        /*width: 100%;
        padding-right: 0px;*/
        display: none;
    }
    .art, .comment-part {
        border-radius: 0;
    }
    .art .left-pic {
        text-align: center;
    }
    #main-part .art .art-pic img {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    #mobile-menu {
        position: fixed;
        display: block;
        width: 60%!important;
        background: url(img/menu_bg.jpg) no-repeat;
        background-size: cover;
        height: 100%;
        z-index: 1;
        left: -60%;
        overflow: hidden;
        background-position: top center;
    }
    #mobile-menu .mobile-menu-img {
        padding: 22px 15px 20px 15px;
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
    }
    #mobile-menu .mobile-menu-img img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: solid 2px pink;
    }
    #mobile-menu .mobile-menu-img .mobile-menu-title {
        color: #fff;
        font-weight: lighter;
        font-size: 18px;
        text-align: center;
    }
    #mobile-menu .mobile-menu-img .mobile-menu-description {
        color: #fff;
        font-size: 14px;
        font-weight: lighter;
    }
    /*#mobile-menu .mobile-menu-main .mobile-menu-item, #mobile-menu .mobile-menu-main .mobile-menu-item:hover, #mobile-menu .mobile-menu-main .mobile-menu-social, #mobile-menu .mobile-menu-main .mobile-menu-social:hover {
        -webkit-transition: all ease .1s;
        transition: all ease .1s;
    }*/
    #mobile-menu .mobile-menu-main .mobile-menu-list {
        list-style: none;
    }
    #mobile-menu .mobile-menu-main .mobile-menu-item {
        text-align: center;
        padding: 10px 40px;
    }
    #mobile-menu .mobile-menu-main .mobile-menu-item a {
        font-size: 16px;
        color: #fff;
        text-decoration: none;
    }
    #mobile-menu .mobile-menu-main .mobile-menu-social {
        color: #fff;
        padding-top: 10px;
    }
    #mobile-menu .mobile-menu-main .mobile-menu-social ul {
        display: block;
        margin: 10px auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    #mobile-menu .mobile-menu-main .mobile-menu-social li {
        display: inline-block;
        font-size: 25px;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        text-align: center;
    }
    #mobile-menu .mobile-menu-plur {
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        filter: alpha(opacity=60);
        -moz-opacity: .6;
        -khtml-opacity: .6;
        opacity: .6;
        -webkit-filter: blur(6px);
        -moz-filter: blur(6px);
        -ms-filter: blur(6px);
        filter: blur(6px);
        background-color: #000;
        top: 0;
    }
}


/*
 *css动画
 *心跳
 */

@-webkit-keyframes xintiao {
    0% {
        -webkit-transform: scale(1)
    }
    50% {
        -webkit-transform: scale(.8)
    }
    to {
        -webkit-transform: scale(1)
    }
}

@keyframes xintiao {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}


/*
 *css动画
 *跳动的笑脸
 */

@-webkit-keyframes my-face {
    2%, 24%, 80% {
        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
        transform: translate(0, 1.5px) rotate(1.5deg)
    }
    4%, 68%, 98% {
        -webkit-transform: translate(0, -1.5px) rotate(-.5deg);
        transform: translate(0, -1.5px) rotate(-.5deg)
    }
    38%, 6% {
        -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);
        transform: translate(0, 1.5px) rotate(-1.5deg)
    }
    8%, 86% {
        -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);
        transform: translate(0, -1.5px) rotate(-1.5deg)
    }
    10%, 72% {
        -webkit-transform: translate(0, 2.5px) rotate(1.5deg);
        transform: translate(0, 2.5px) rotate(1.5deg)
    }
    12%, 64%, 78%, 96% {
        -webkit-transform: translate(0, -.5px) rotate(1.5deg);
        transform: translate(0, -.5px) rotate(1.5deg)
    }
    14%, 54% {
        -webkit-transform: translate(0, -1.5px) rotate(1.5deg);
        transform: translate(0, -1.5px) rotate(1.5deg)
    }
    16% {
        -webkit-transform: translate(0, -.5px) rotate(-1.5deg);
        transform: translate(0, -.5px) rotate(-1.5deg)
    }
    18%, 22% {
        -webkit-transform: translate(0, .5px) rotate(-1.5deg);
        transform: translate(0, .5px) rotate(-1.5deg)
    }
    20%, 36%, 46% {
        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
        transform: translate(0, -1.5px) rotate(2.5deg)
    }
    26%, 50% {
        -webkit-transform: translate(0, .5px) rotate(.5deg);
        transform: translate(0, .5px) rotate(.5deg)
    }
    28% {
        -webkit-transform: translate(0, .5px) rotate(1.5deg);
        transform: translate(0, .5px) rotate(1.5deg)
    }
    30%, 40%, 62%, 76%, 88% {
        -webkit-transform: translate(0, -.5px) rotate(2.5deg);
        transform: translate(0, -.5px) rotate(2.5deg)
    }
    32%, 34%, 66% {
        -webkit-transform: translate(0, 1.5px) rotate(-.5deg);
        transform: translate(0, 1.5px) rotate(-.5deg)
    }
    42% {
        -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);
        transform: translate(0, 2.5px) rotate(-1.5deg)
    }
    44%, 70% {
        -webkit-transform: translate(0, 1.5px) rotate(.5deg);
        transform: translate(0, 1.5px) rotate(.5deg)
    }
    48%, 74%, 82% {
        -webkit-transform: translate(0, -.5px) rotate(.5deg);
        transform: translate(0, -.5px) rotate(.5deg)
    }
    52%, 56%, 60% {
        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
        transform: translate(0, 2.5px) rotate(2.5deg)
    }
    58% {
        -webkit-transform: translate(0, .5px) rotate(2.5deg);
        transform: translate(0, .5px) rotate(2.5deg)
    }
    84% {
        -webkit-transform: translate(0, 1.5px) rotate(2.5deg);
        transform: translate(0, 1.5px) rotate(2.5deg)
    }
    90% {
        -webkit-transform: translate(0, 2.5px) rotate(-.5deg);
        transform: translate(0, 2.5px) rotate(-.5deg)
    }
    92% {
        -webkit-transform: translate(0, .5px) rotate(-.5deg);
        transform: translate(0, .5px) rotate(-.5deg)
    }
    94% {
        -webkit-transform: translate(0, 2.5px) rotate(.5deg);
        transform: translate(0, 2.5px) rotate(.5deg)
    }
    0%, 100% {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0)
    }
}

@keyframes my-face {
    2%, 24%, 80% {
        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
        transform: translate(0, 1.5px) rotate(1.5deg)
    }
    4%, 68%, 98% {
        -webkit-transform: translate(0, -1.5px) rotate(-.5deg);
        transform: translate(0, -1.5px) rotate(-.5deg)
    }
    38%, 6% {
        -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);
        transform: translate(0, 1.5px) rotate(-1.5deg)
    }
    8%, 86% {
        -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);
        transform: translate(0, -1.5px) rotate(-1.5deg)
    }
    10%, 72% {
        -webkit-transform: translate(0, 2.5px) rotate(1.5deg);
        transform: translate(0, 2.5px) rotate(1.5deg)
    }
    12%, 64%, 78%, 96% {
        -webkit-transform: translate(0, -.5px) rotate(1.5deg);
        transform: translate(0, -.5px) rotate(1.5deg)
    }
    14%, 54% {
        -webkit-transform: translate(0, -1.5px) rotate(1.5deg);
        transform: translate(0, -1.5px) rotate(1.5deg)
    }
    16% {
        -webkit-transform: translate(0, -.5px) rotate(-1.5deg);
        transform: translate(0, -.5px) rotate(-1.5deg)
    }
    18%, 22% {
        -webkit-transform: translate(0, .5px) rotate(-1.5deg);
        transform: translate(0, .5px) rotate(-1.5deg)
    }
    20%, 36%, 46% {
        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
        transform: translate(0, -1.5px) rotate(2.5deg)
    }
    26%, 50% {
        -webkit-transform: translate(0, .5px) rotate(.5deg);
        transform: translate(0, .5px) rotate(.5deg)
    }
    28% {
        -webkit-transform: translate(0, .5px) rotate(1.5deg);
        transform: translate(0, .5px) rotate(1.5deg)
    }
    30%, 40%, 62%, 76%, 88% {
        -webkit-transform: translate(0, -.5px) rotate(2.5deg);
        transform: translate(0, -.5px) rotate(2.5deg)
    }
    32%, 34%, 66% {
        -webkit-transform: translate(0, 1.5px) rotate(-.5deg);
        transform: translate(0, 1.5px) rotate(-.5deg)
    }
    42% {
        -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);
        transform: translate(0, 2.5px) rotate(-1.5deg)
    }
    44%, 70% {
        -webkit-transform: translate(0, 1.5px) rotate(.5deg);
        transform: translate(0, 1.5px) rotate(.5deg)
    }
    48%, 74%, 82% {
        -webkit-transform: translate(0, -.5px) rotate(.5deg);
        transform: translate(0, -.5px) rotate(.5deg)
    }
    52%, 56%, 60% {
        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
        transform: translate(0, 2.5px) rotate(2.5deg)
    }
    58% {
        -webkit-transform: translate(0, .5px) rotate(2.5deg);
        transform: translate(0, .5px) rotate(2.5deg)
    }
    84% {
        -webkit-transform: translate(0, 1.5px) rotate(2.5deg);
        transform: translate(0, 1.5px) rotate(2.5deg)
    }
    90% {
        -webkit-transform: translate(0, 2.5px) rotate(-.5deg);
        transform: translate(0, 2.5px) rotate(-.5deg)
    }
    92% {
        -webkit-transform: translate(0, .5px) rotate(-.5deg);
        transform: translate(0, .5px) rotate(-.5deg)
    }
    94% {
        -webkit-transform: translate(0, 2.5px) rotate(.5deg);
        transform: translate(0, 2.5px) rotate(.5deg)
    }
    0%, 100% {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0)
    }
}
}
